React Button Examples

In this guide we're going to demonstrate various properties and types of Buttons you can render with React. For each example we will provide an example and the source code. All the examples can be found in the CodeSandbox below:

You can render a normal html with React, as usual React prop conventions apply, such as onClick, style, etc.

The button's onClick prop is what allows us to add a function which fires when the user clicks on the button. In the above example, we define a function sayHello which alerts a message. Then, we use this function as the value of the onClick prop.

Changing the inner content between the button tags changes the text of the button. "Button Text" is between the two Button tags, and that sets the Button's text.

This button looks very outdated, so we'll show how to restyle this using styled-components.

Fun fact, if you inspect the default Button with the webkit inspector (right-click -> inspect), you can see the browser's default styles defined in the user agent stylesheet.

Using styled-components, we can create our own React button component and style it with css inside the template tag. If you're not familiar with styled-components, check out our guide here. Styling a button is not much different than styling a div, except we're adding styles on top of the browser's already styled button, so the good news is that we don't need to add too many properties here to make it look nice. For example, the html button's text is already centered for us.

We mainly want to change the background color, increase the font size, add more padding (vertical then horizontal below), add a border radius, and change the cursor to a pointer. Doing those 5 things will give you a modern looking React Button you can use:

The html button already has a disabled property which disables the button, but we can to apply more styles to our Button when it's disabled. Using the &:disabled selector, we'll dim the button with a 70% opacity, change the text color and change the cursor back to the default.

Wrapping a button in a link tag transforms it into a link. Really any content you place in an tag will become a link, even images. Then, using the href property, you can redirect to a new page.

You can use flexbox to create a group of buttons.

In order to add toggle functionality we need to keep track of the state of which button is toggled. We're going to use react hooks for that. We loop through a types array which we use for the text for the Button, but also as the string to keep track of which button is active. We initialize the useState hook with the first type from the array. Then, we loop over the types and render a ButtonToggle, which is extended from our other Button we had previously created so we could add styles to dim the opacity when it is not active (default). When it is active, it's back to the normal opacity.

We check active, which is the current state, against the type that we loop over. When we click on the Button, we run our arrow function which calls the setActive setter. This sets the next active button to be whatever type we click on. This example is practically identical to our tabs guide except we remove the background on the Buttons to make them look like tabs there.

If you'd prefer to use an open-source Button, check out our tutorial on Material-UI Buttons.

馃泩 React School creates templates and video courses for building beautiful apps with React. Download our free Material UI template.